<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图导航</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="no">
		<meta name="apple-mobile-web-app-status-bar-style" content="#6f9ddc">
		<meta name="renderer" content="webkit">
		<meta name="full-screen" content="yes">
		<meta name="x5-fullscreen" content="true">
		<link rel="stylesheet" type="text/css" href="../commom/style/style.css" />
		<link rel="stylesheet" type="text/css" href="../commom/style/audioplayer.css" />
		<link rel="stylesheet" type="text/css" href="../commom/style/common.css" />
		<link rel="stylesheet" type="text/css" href="../commom/style/theme.css" />
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2a4a97ff0f601536f617462695e00869&&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
	</head>
	<style>
		#container {
			width: 100%;
			height: 100%;
		}

		.content-window-card {
			position: relative;
			box-shadow: none;
			bottom: 0;
			left: 0;
			width: auto;
			padding: 0;
		}

		.content-window-card p {
			height: 2rem;
		}

		.custom-info {
			border: solid 1px silver;
		}

		div.info-top {
			position: relative;
			background: none repeat scroll 0 0 #F9F9F9;
			border-bottom: 1px solid #CCC;
			border-radius: 5px 5px 0 0;
		}

		div.info-top div {
			display: inline-block;
			color: #333333;
			font-size: 14px;
			font-weight: bold;
			line-height: 31px;
			padding: 0 10px;
		}

		div.info-top img {
			position: absolute;
			top: 10px;
			right: 10px;
			transition-duration: 0.25s;
		}

		div.info-top img:hover {
			box-shadow: 0px 0px 5px #000;
		}

		div.info-middle {
			font-size: 12px;
			padding: 10px 6px;
			line-height: 20px;
		}

		div.info-bottom {
			height: 0px;
			width: 100%;
			clear: both;
			text-align: center;
		}

		div.info-bottom img {
			position: relative;
			z-index: 104;
		}

		span {
			margin-left: 5px;
			font-size: 11px;
		}

		.info-middle img {
			float: left;
			margin-right: 6px;
		}
	</style>
	<body>

		<div class="main">
			<!-- 返回按钮 -->
			<header class="page-header">
				<i class="icon-arrow-left"></i><label>景点导航</label>
			</header>

			<div class="page-bodyer">
				    <div class="input-item">
				    </div>
				<div class="container" id="container">
				</div>
				<!-- <div id="tip" class="info" onclick="open11()">地图正在加载</div> -->
			</div>
		</div>

	</body>
	<script>
		// 创建地图实例
		var map = new AMap.Map("container", {
			zoom: 17, //级别
			center: [113.57965, 22.24752], //中心点坐标
			resizeEnable: true,
			// viewMode: '3D', //使用3D视图
			pitch: 45,
		});
		
		//地图加载完事件
		// map.on('complete', function() {
		// 	document.getElementById('tip').innerHTML = "地图图块加载完毕！当前地图中心点为：" + map.getCenter();
		// });

		//3d罗盘
		AMap.plugin([
			'AMap.ControlBar',
		], function() {
			// 添加 3D 罗盘控制
			map.addControl(new AMap.ControlBar());
		});
		//简易缩放工具
		// AMap.plugin([
		// 	'AMap.ToolBar',
		// ], function(){
		// 	// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
		// 	map.addControl(new AMap.ToolBar({
		// 		// 简易缩放模式，默认为 false
		// 		liteStyle: true
		// 	}));
		// });

		addMarker();
		addMarker2();
		addMarker3();
		var marker1
		
		
		//添加marker标记
		function addMarker() {
			map.clearMap();
			 marker1 = new AMap.Marker({
				map: map,
				position: [113.57965, 22.24752],
				content: ' <img src="../commom/images/mapMark.png"> <div style=font-size:20px;color:red;font-weight:bold>这里是屌丝厕所</div>'
			});
			//鼠标点击marker弹出自定义的信息窗体
			AMap.event.addListener(marker1, 'click', function() {
				infoWindow.open(map, marker1.getPosition());
			});
			
			marker1.setAnimation('AMAP_ANIMATION_BOUNCE');
		}

		function addMarker2() {
			var marker = new AMap.Marker({
				map: map,
				position: [113.57865, 22.24952],
				content: ' <img src="../commom/images/mapMark.png"> <div style=font-size:20px;color:red;font-weight:bold>这里是屌丝客厅</div>'
			});
			//鼠标点击marker弹出自定义的信息窗体
			AMap.event.addListener(marker, 'click', function() {
				infoWindow.open(map, marker.getPosition());
			});
		}

		function addMarker3() {
			var marker = new AMap.Marker({
				map: map,
				position: [113.57965, 22.24895],
				content: ' <img src="../commom/images/mapMark.png"> <div style=font-size:20px;color:red;font-weight:bold>这里是屌丝厨房</div>'
			});
			//鼠标点击marker弹出自定义的信息窗体
			AMap.event.addListener(marker, 'click', function() {
				infoWindow.open(map, marker.getPosition());
			});
		}

		//实例化信息窗体
		var title = '屌丝浩假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
			content = [];
		content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：中山市屌丝浩酒店");
		content.push("电话：010-99999999");
		content.push("<div onclick='openGDMap()'> 点击导航</div>");
		var infoWindow = new AMap.InfoWindow({
			isCustom: true, //使用自定义窗体
			content: createInfoWindow(title, content.join("<br/>")),
			offset: new AMap.Pixel(16, -45)
		});

		//构建自定义信息窗体
		function createInfoWindow(title, content) {
			var info = document.createElement("div");
			info.className = "custom-info input-card content-window-card";

			//可以通过下面的方式修改自定义窗体的宽高
			//info.style.width = "400px";
			// 定义顶部标题
			var top = document.createElement("div");
			var titleD = document.createElement("div");
			var closeX = document.createElement("img");
			top.className = "info-top";
			titleD.innerHTML = title;
			closeX.src = "https://webapi.amap.com/images/close2.gif";
			closeX.onclick = closeInfoWindow;

			top.appendChild(titleD);
			top.appendChild(closeX);
			info.appendChild(top);

			// 定义中部内容
			var middle = document.createElement("div");
			middle.className = "info-middle";
			middle.style.backgroundColor = 'white';
			middle.innerHTML = content;
			info.appendChild(middle);

			// 定义底部内容
			var bottom = document.createElement("div");
			bottom.className = "info-bottom";
			bottom.style.position = 'relative';
			bottom.style.top = '0px';
			bottom.style.margin = '0 auto';
			var sharp = document.createElement("img");
			sharp.src = "https://webapi.amap.com/images/sharp.png";
			bottom.appendChild(sharp);
			info.appendChild(bottom);
			return info;
		}

		function openGDMap() {
			marker1.markOnAMAP({
				name:'珠海市香洲区九洲大道东1227号',
				position:marker1.getPosition()
			})
		}		//关闭信息窗体
		function closeInfoWindow() {
			map.clearInfoWindow();
		}
		
	</script>
</html>
